<template>
  <div class="body">
    <div class="text_box">
      <h1 class="top_text">幸运夺宝</h1>
      <h1 class="top_text">点关注 亮灯牌 免费送一次摇摇乐</h1>
      <p class="top_date">{{ date }}</p>
    </div>

    <!-- 上五个 -->
    <div class="box_top">
      <div class="box" id="1" :class="{ boxborder: isid === 1 }">
        <h1>谢谢<br />参与</h1>
      </div>
      <div class="box" id="2" :class="{ boxborder: isid === 2 }">
        <img src="../src/assets/2.jpg" />
      </div>
      <div class="box" id="3" :class="{ boxborder: isid === 3 }">
        <h1>再来<br />一次</h1>
      </div>
      <div class="box" id="4" :class="{ boxborder: isid === 4 }">
        <img src="../src/assets/4.jpg" />
      </div>
      <div class="box" id="5" :class="{ boxborder: isid === 5 }">
        <h1>谢谢<br />参与</h1>
      </div>
    </div>

    <div class="zhong">
      <div class="box_l">
        <div class="box_l_box" id="14" :class="{ boxborder: isid === 14 }">
          <h1>再来<br />一次</h1>
        </div>
        <div class="box_l_box" id="13" :class="{ boxborder: isid === 13 }">
          <img src="../src/assets/13.jpg" />
        </div>
      </div>
      <div class="box_z">
        <h1 class="p_cla">点关注</h1>
        <div class="box_zz">
          <div v-if="img_p">
            <h1>{{ tWd }}</h1>
          </div>
          <div v-else class="box">
            <img :src="tWd" alt="" />
          </div>
          <div @click="btn" class="box_zzb">点击抽奖</div>
        </div>

        <h1 class="p_cla">亮灯牌</h1>
      </div>
      <div class="box_r">
        <div class="box_l">
          <div class="box_l_box" id="6" :class="{ boxborder: isid === 6 }">
            <img src="../src/assets/6.jpg" />
          </div>
          <div class="box_l_box" id="7" :class="{ boxborder: isid === 7 }">
            <h1>谢谢<br />参与</h1>
          </div>
        </div>
      </div>
    </div>

    <div class="box_top">
      <div class="box" id="10" :class="{ boxborder: isid === 12 }">
        <h1>谢谢<br />参与</h1>
      </div>
      <div class="box" id="11" :class="{ boxborder: isid === 11 }">
        <h1>再来<br />一次</h1>
      </div>
      <div class="box" id="12" :class="{ boxborder: isid === 10 }">
        <img src="../src/assets/9.jpg" />
      </div>
      <div class="box" id="13" :class="{ boxborder: isid === 9 }">
        <h1>谢谢<br />参与</h1>
      </div>
      <div class="box" id="14" :class="{ boxborder: isid === 8 }">
        <h1>再来<br />一次</h1>
      </div>
    </div>
  </div>
</template>

<script>
import video from "@/assets/冬.mp3";
import er from "@/assets/2.jpg";
import si from "@/assets/4.jpg";
import liu from "@/assets/6.jpg";
import jiu from "@/assets/9.jpg";
import shisan from "@/assets/13.jpg";
export default {
  data() {
    return {
      isid: 1,
      cont: 0,
      arr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],
      win: [2, 4, 6, 9, 13],
      winconunt: 0,
      video,
      isau: false,
      date: "",
      tWd: "",
      img_p: true,
    };
  },
  watch: {
    cont() {
      switch (this.cont) {
        case 1:
          this.img_p = true;
          this.tWd = "谢谢参与";
          break;
        case 2:
          this.tWd = er;
          this.img_p = false;
          break;
        case 3:
          this.img_p = true;
          this.tWd = "再来一次";
          break;
        case 4:
          this.tWd = si;
          this.img_p = false;
          break;
        case 5:
          this.img_p = true;
          this.tWd = "谢谢参与";
          break;
        case 6:
          this.tWd = liu;
          this.img_p = false;
          break;
        case 7:
          this.img_p = true;
          this.tWd = "谢谢参与";
          break;
        case 8:
          this.img_p = true;
          this.tWd = "再来一次";
          break;
        case 9:
          this.img_p = true;
          this.tWd = "谢谢参与";
          break;
        case 10:
          this.tWd = jiu;
          this.img_p = false;
          break;
        case 11:
          this.img_p = true;
          this.tWd = "再来一次";
          break;
        case 12:
          this.img_p = true;
          this.tWd = "谢谢参与";
          break;
        case 13:
          this.tWd = shisan;
          this.img_p = false;
          break;
        case 14:
          this.img_p = true;
          this.tWd = "再来一次";
          break;
        default:
          this.tWd = "再来一次";
      }
    },
  },
  created() {
    setInterval(() => {
      this.date = this.formatDate("hh:mm:ss");
    }, 1000);
  },
  methods: {
    // audio() {
    //   this.isau = true;
    //   this.$refs.audio.play();
    //   setInterval(() => {
    //     this.isau = false;
    //   }, 1000);
    // },
    btn() {
      var count = this.ber();
      // var a = this.ber() % 14 === 0 ? 14 : this.ber() % 14; //取余等于0时返回14，反之返回余数
      // console.log("id=", this.isid, "a=", a);
      // console.log(this.winconunt);
      this.winconunt++;
      var timeId = setInterval(() => {
        // this.audio();
        setInterval(() => {}, 80);
        count--;
        if (count <= 0) {
          clearInterval(timeId);
        }
        if (this.cont < 14) {
          this.cont++;
          this.isid = this.cont;
          // console.log(this.cont);
        } else {
          this.cont = 0;
        }
        // console.log(count);
        // if (this.winconunt === 2) {
        //   if (this.isid < a) {
        //     count = count + (14 - a + this.isid);
        //   } else {
        //     count = count + (a - this.isid);
        //   }
        // } else if (this.winconunt === 11) {
        //   this.isid = 13;
        // } else if (this.winconunt === 16) {
        //   this.isid = 4;
        // } else if (this.winconunt === 21) {
        //   this.isid = 10;
        // } else if (this.winconunt === 25) {
        //   this.isid = 6;
        //   this.winconunt = 0;
        // } else if (this.cont < 14) {
        //   this.cont++;
        //   this.isid = this.cont;
        // } else {
        //   this.cont = 0;
        // }
        //这里写你的业务代码
      }, 80);
    },
    // 随机数
    ber() {
      return Math.round(Math.random() * 40 + 40);
    },
    // 获取时间
    formatDate(fmt) {
      const date = new Date();
      const o = {
        "Y+": date.getFullYear(),
        "M+": date.getMonth() + 1, // 月
        "D+": date.getDate(), // 日
        "h+": date.getHours(), // 时
        "m+": date.getMinutes(), // 分
        "s+": date.getSeconds(), // 秒
        W: date.getDay(), // 周
      };
      for (let k in o) {
        if (new RegExp("(" + k + ")").test(fmt)) {
          fmt = fmt.replace(RegExp.$1, () => {
            if (k === "W") {
              // 星期几
              const week = ["日", "一", "二", "三", "四", "五", "六"];
              return week[o[k]];
            } else if (k === "Y+" || RegExp.$1.length === 1) {
              // 年份 or 小于10不加0
              return o[k];
            } else {
              return ("00" + o[k]).substr(("" + o[k]).length); // 小于10补位0
            }
          });
        }
      }
      return fmt;
    },
  },
};
</script>

<style>
@keyframes myfirst {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes color {
  0% {
    color: #1de5e2;
  }
  25% {
    color: #b588f7;
  }
  50% {
    color: #e1e13f;
  }
  75% {
    color: #b588f7;
  }
  100% {
    color: #1de5e2;
  }
}
.body {
  height: 100vh;
  background-color: black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: aliceblue;
  /* font-size: 0; */
}
img {
  width: 100%;
  height: 100%;
}
.boxborder {
  animation: myfirst 0.5s;
  border: 5px solid #fff !important;
}
.box_top {
  display: flex;
}
.box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 384px;
  height: 200px;
  border: 5px solid transparent;
  font-size: 30px;
  background-image: url("@/assets/bground.jpg");
  background-size: 100% 100%;
  color: #fff;
}
.box_zz {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 384px;
  height: 200px;
  border: 5px solid transparent;
  font-size: 30px;
  background-image: url("@/assets/bground.jpg");
  background-size: 100% 100%;
  color: #fff;
}

.box_zzb {
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(141, 141, 244);
  position: absolute;
  top: 590px;
  border-radius: 50px;
  cursor: pointer;
}
.cent {
  display: flex;
  justify-content: space-between;
}
.cent_right {
  margin-right: 50px;
}
.carw {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 500px;
  height: 200px;
  top: 150px;
  left: 500px;
}

.zhong {
  display: flex;
}

.box_z {
  width: 915px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box_l {
  width: 300px;
  height: 370px;
  font-size: 30px;
  border: 5px solid transparent;
}
.box_r {
  width: 300px;
  height: 380px;
  border: 5px solid transparent;
}
.box_l_box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50%;
  border: 5px solid transparent;
  background-image: url("@/assets/bground.jpg");
  background-size: 100% 100%;
  color: #fff;
}

.box_z_box {
  width: 33%;
  height: 80%;
  border: 5px solid transparent;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* video {
  width: 100%;
  height: 100%;
} */
.p_c_v {
  margin-left: 30px;
  font-size: 30px;
  letter-spacing: 70px;
  color: #1de5e2;
  text-shadow: 5px 5px 5px #ff0000;
  -webkit-animation-name: color; /* 动画名称 */
  -webkit-animation-duration: 2s; /* 动画时长3秒 */
  -webkit-animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
  -webkit-animation-iteration-count: infinite; /* 播放次数：无限 */
}

.p_cla {
  writing-mode: tb-rl;
  font-size: 50px;
  font-weight: 900;
  color: #1de5e2;
  text-shadow: 5px 5px 5px #ff0000;
  -webkit-animation-name: color; /* 动画名称 */
  -webkit-animation-duration: 2s; /* 动画时长3秒 */
  -webkit-animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
  -webkit-animation-iteration-count: infinite; /* 播放次数：无限 */
}

.top_text {
  color: yellow;
}
.text_box {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.top_date {
  font-size: 30px;
}

.box_z_cont {
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
</style>
